/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 10px;

@function pxToRem($px){
	@return $px/$fontsize*1rem;
}

/* 使用变量 */
@charset "utf-8";
/* reset */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,select,figure,figcaption,button,input,textarea,th,td{margin:0;padding:0;}
em,i { font-style:normal; }
li { list-style:none; }
a {text-decoration:none;color:inherit;} a:hover{text-decoration:none;}
a:focus{text-decoration: none;outline: none;}
img { border:none; vertical-align:middle; max-width:100%;max-height:100%;}
table { border-collapse:collapse; }
input,textarea { outline:none; background: none; border: none; }
textarea { resize:none; overflow:auto; }
body{font-size:12px; font-family:'Arial';color:#333; position: relative; min-width: 1400px;}
/* public */
.clearfix {*zoom: 1;}

@font-face{
	font-family: '思源宋体';
	src:url('../font/SourceHanSerifCN-Regular-1.otf');
}

.cleartab:before,.cleartab::after{content:'';display: table;}
/* 外边距溢出 */
.clearfix:before,.clearfix:after {content:'';display: block;height: 0;clear: both;visibility: hidden;}
/* 高度坍塌 */
.img_box{display:table-cell;vertical-align:middle;text-align:center;}
/* 居中 */
.main{width:100%; max-width:1280px; margin:0 auto;}
/* 宽度最大 */
.fixed{position:fixed;left:0;top:0;z-index:999;}
.btn{font-family: '微软雅黑';cursor:pointer;}
.bl{display:inline-block;float:left;}
.br{display:inline-block;float:right;}
h1,h2,h3,h4,h5{font-weight:normal;}



.list{
	font: {
	  family: Helvetica, sans-serif;
	  size: $fontsize;
	  weight: bold;
	}
	.list_box{
		float: left;
		&:nth-of-type(1){
			float: left;
			background-color: #FF0000;
		}
		a{
			font-size: pxToRem(16px);
			&:hover{
				color: #FF0000;
			}
		}
	}
}

.tab{
	.nav{
		margin: 10px 0 40px;
		li{
			float: left;
			&+li::before{
				content: '/';
				margin: 0 5px;
				display: inline-block;
			}
			a{
				transition: .5s;
				font-size: 14px;
				line-height: 20px;
				&:hover{
					color: #F18D22;
				}
			}
		}
	}
}

.banner{
	position: relative;
	img{
		width: 100%;
	}
	.hd{
		left: 0;
		bottom: 0;
		top: auto;
		position: absolute;
		
		width: 100%;
		padding: 20px 0;
		
		text-align: center;
		border-bottom: 1px solid #dfdfdf;
		
		transform: none;
		
		ul{
			display: inline-block;
			
			li{
				float: left;
				text-indent: -9999px;
				
				width: 12px;
				height: 12px;
				margin: 0 8px;
				display: inline-block;
				vertical-align: middle;
				
				background-color: #a0a0a0;
				border-radius: 50%;
				
				cursor: pointer;
				transform: translate(0,-50%);
				.on{
					width: 12px;
					height: 12px;
					background: #FFFFFF no-repeat center;
				}
			}
		}
	}
	
	.banner_prev,.banner_next{
		top:45%;
		position:absolute;
		
		width:50px;
		line-height:50px;
		height:50px;
		
		color:#fff;
		text-align:center;
		font:bold 38px '宋体';
		
		border-radius:100px;
		background:rgba(0, 0, 0, .4);
		
		opacity:.4;
		cursor:pointer;
		display:inline-block;
		
		&:hover{
			opacity: 1;
		}
	}
	.banner_prev{
		left:204px;
		background: url(../images/banner_prev.png) no-repeat center/14px 26px;
	}
	.banner_next{
		right:204px;
		background: url(../images/banner_next.png) no-repeat center/14px 26px;
	}
	.cur{
		left:50%;
		bottom:30px;
		position:absolute;
		
		width:20px;
		height:40px;
		margin-left:10px;
		
		background:url(../images/cursor.png) no-repeat center;
		
		cursor:pointer;
		display:inline-block;
	}
}

.strip-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    li {
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1s ease-in-out infinite;
        & + li {
            margin-left: 5px;
        }
        &:nth-child(2) {
            animation-delay: 200ms;
        }
        &:nth-child(3) {
            animation-delay: 400ms;
        }
        &:nth-child(4) {
            animation-delay: 600ms;
        }
        &:nth-child(5) {
            animation-delay: 800ms;
        }
        &:nth-child(6) {
            animation-delay: 1s;
        }
    }
}
@keyframes beat {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
}

.strip-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    li {
        --time: calc((var(--line-index) - 1) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1.5s ease-in-out var(--time) infinite;
        & + li {
            margin-left: 5px;
        }
    }
}
@keyframes beat {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
}


$color-list: #f66 #66f #f90 #09f #9c3 #3c9;
.hover-tips {
	margin: 200px;
    width: 200px;
    display: flex;
    justify-content: space-between;
    li {
        position: relative;
        padding: 2px;
        border: 2px solid transparent;
        border-radius: 100%;
        width: 24px;
        height: 24px;
        background-clip: content-box;
        cursor: pointer;
        transition: all 300ms;
        &::before,
        &::after {
            position: absolute;
            left: 50%;
            bottom: 100%;
            opacity: 0;
            transform: translate3d(0, -30px, 0);
            transition: all 300ms;
        }
        &::before {
            margin: 0 0 12px -35px;
            border-radius: 5px;
            width: 70px;
            height: 30px;
            background-color: rgba(#000, .5);
            line-height: 30px;
            text-align: center;
            color: #fff;
            content: attr(data-name);
        }
        &::after {
            margin-left: -6px;
            border: 6px solid transparent;
            border-top-color: rgba(#000, .5);
            width: 0;
            height: 0;
            content: "";
        }
        @each $color in $color-list {
            $index: index($color-list, $color);
            &:nth-child(#{$index}) {
                background-color: $color;
                &:hover {
                    border-color: $color;
                }
            }
        }
        &:hover {
            &::before,
            &::after {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }
    }
}


a{
	width: 28px;
	height: 28px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
	$icon-list: icon25 icon26 icon27 icon28;
	@each $icon in $icon-list {
		$index: index($icon-list, $icon);
		&:nth-of-type(#{$index}) {
			background-image: url("../images/"+$icon+".png");;
		}
	}
}



.state-ball {
    overflow: hidden;
    position: relative;
    padding: 5px;
    border: 3px solid #3c9;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    background-color: #fff;
    &::before,
    &::after {
        position: absolute;
        left: 50%;
        bottom: 5px;
        z-index: 9;
        margin-left: -100px;
        width: 200px;
        height: 200px;
        content: "";
    }
    &::before {
        margin-bottom: calc(var(--offset) * 1.34px);
        border-radius: 45%;
        background-color: rgba(#fff, .5);
        animation: rotate 10s linear -5s infinite;
    }
    &::after {
        margin-bottom: calc(var(--offset) * 1.34px + 10px);
        border-radius: 40%;
        background-color: rgba(#fff, .8);
        animation: rotate 15s infinite;
    }
    .wave {
        position: relative;
        border-radius: 100%;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to bottom, #af8 13%, #3c9 91%);
    }
    .progress::after {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-weight: bold;
        font-size: 16px;
        color: #09f;
        content: counter(progress) "%";
        counter-reset: progress var(--offset);
    }
}
@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}


.active {
    background-color: #3c9;
    color: #fff;
}

.tab-navbar {
    display: flex;
    overflow: hidden;
    flex-direction: column-reverse;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    input {
        &:nth-child(1):checked {
            & ~ nav label:nth-child(1) {
                @extend .active;
            }
            & ~ main ul {
                background-color: #f66;
                transform: translate3d(0, 0, 0);
            }
        }
        &:nth-child(2):checked {
            & ~ nav label:nth-child(2) {
                @extend .active;
            }
            & ~ main ul {
                background-color: #66f;
                transform: translate3d(-25%, 0, 0);
            }
        }
        &:nth-child(3):checked {
            & ~ nav label:nth-child(3) {
                @extend .active;
            }
            & ~ main ul {
                background-color: #f90;
                transform: translate3d(-50%, 0, 0);
            }
        }
        &:nth-child(4):checked {
            & ~ nav label:nth-child(4) {
                @extend .active;
            }
            & ~ main ul {
                background-color: #09f;
                transform: translate3d(-75%, 0, 0);
            }
        }
    }
    nav {
        display: flex;
        height: 40px;
        background-color: #f0f0f0;
        line-height: 40px;
        text-align: center;
        label {
            flex: 1;
            cursor: pointer;
            transition: all 300ms;
        }
    }
    main {
        flex: 1;
        ul {
            display: flex;
            flex-wrap: nowrap;
            width: 400%;
            height: 100%;
            transition: all 300ms;
        }
        li {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            font-weight: bold;
            font-size: 20px;
            color: #fff;
        }
    }
}

:root {
    --borderColor: #03A9F3;
}

.border-radius{
    position: relative;
    width: 140px;
    height: 64px;
    margin: 50px auto;
    border: 1px solid var(--borderColor);
    cursor: pointer;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        transition: .3s ease-in-out;
    }
    
    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }
    
    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }
    
    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}


.xuanzhuang{
	width: 200px;
	height: 150px;
	margin: 150px auto;
	background:
		linear-gradient(90deg,#333 50%, transparent 0) repeat-x,
		linear-gradient(90deg,#333 50%, transparent 0) repeat-x,
		linear-gradient(0deg,#333 50%, transparent 0) repeat-y,
		linear-gradient(0deg,#333 50%, transparent 0) repeat-y;
	background-size:4px 1px,4px 1px,1px 4px,1px 4px;
	background-position:0 0,0 100%,0 0,100% 0;
	// border:1px solid #333;
	// transition: .3s ease-in-out;
	outline:1px solid #333;
	outline-offset:-1px;

	&:hover{
		outline:none;
		animation:linearGradientMove .3s infinite linear;
	}
}

@keyframes linearGradientMove{
	100%{
		background-position:4px 0,-4px 100%,0 -4px,100% 4px;
	}
}



.wuyan{
	width: 200px;
	height: 150px;
	margin: 10px auto;
	overflow: hidden;
	position:relative;
	border-radius: 5px;
	&::after{
		content:'';
		left:-50%;
		top:-50%;
		width:200%;
		height:200%;
		position:absolute;
		background-repeat:no-repeat;
		background-size:50% 50%,50% 50%;
		animation: rotate 4s linear infinite;
		background-position:0 0,100% 0,100% 100%,0 100%;
		background-image:
			linear-gradient(#399953,#399953),
			linear-gradient(#fbb300, #fbb300),
			linear-gradient(#d53e33, #d53e33),
			linear-gradient(#377af5, #377af5);
	}
}

.wuyan1::after{
	background-image:
		linear-gradient(#399953,#399953);
}

.wuyan2::before{
	z-index: 1;
	content: '';
	width: 190px;
	height: 140px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position:absolute;
	display: inline-block;
	background-color: #FFFFFF;
}

@keyframes rotate{100%{transform:rotate(1turn);}}

.conic{
	width: 200px;
	height: 150px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 5px;
	position:relative;
	background-color: #1a232a;
	&::before{
		content:'';
		position:absolute;
		left:-50%;
		top:-50%;
		width:200%;
		height:200%;
		background:conic-gradient(transparent,rgba(168,239,255,1),transparent 30%);
		animation:rotate 4s linear infinite;
	}
	&::after{
		border-radius: 5px;
		z-index: 1;
		content: '';
		width: 190px;
		height: 140px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		position:absolute;
		display: inline-block;
		background-color: #000;
	}
}



:root {
    --url: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/hearts-border-image.png');
}


div {
	position: relative;
    width: 200px;
    height: 120px;
    margin: auto; 
}

.heart {
    border: 21px solid;
    border-image: var(--url) 21 round;
}

.skulls {
  position: relative;
  width: 600px;
  height: 200px;
  margin: 0 auto;
  border: 24px solid;
  border-image: url(https://skullctf.com/images/skull-border.svg);
  border-image-slice: 32;
  border-image-repeat: round;
}


.border-image-clip-path{
	width:200px;
	height:100px;
	border:10px solid;
	border-image:linear-gradient(45deg,gold,deeppink)1;
	clip-path:inset(0px round 10px);
	animation:huerotate 6s infinite linear;
	filter:hue-rotate(360deg);
}
@keyframes huerotate{
	0%{
		filter:hue-rotate(0deg);
	}100%{
		filter:hue-rotate(360deg);
	}
}